<template>
    <div>
        <div v-show="showVideo">
            <el-tabs type="border-card" v-model="watchName" @tab-click="onWatchChange">
                <el-tab-pane v-for="(watch, index) in watchList" :label="watch.name" :key="index"></el-tab-pane>
            </el-tabs>
            <div style="width: 100%;">
                <!--<video id="my-video" class="video-js vjs-big-play-centered" controls
                       poster="" :width="videoWidth" :height="videoHeight" preload="auto"
                       data-setup='{}'>
                </video>-->
                <video-player v-if="showVideoPlayer" class="video-player vjs-custom-skin"
                              ref="videoPlayer"
                              :playsinline="true"
                              :options="playerOptions">
                </video-player>
            </div>
            <el-button type="text" @click="toPcUrl('')">复制电脑端直播链接</el-button>
        </div>
        <div v-if="!showVideo" style="text-align: center;margin: 5% auto">
            <div v-for="(linkUrl,index) in linkUrlList">
                <el-button type="text" v-if="linkUrl !==''" id="pcUrl" @click="toUrl(linkUrl)">在线视频直播入口{{index+1}}
                </el-button>
                <el-button type="text" @click="toPcUrl(linkUrl)">复制链接</el-button>
            </div>
        </div>
        <textarea id="input"></textarea>

        <el-tabs v-model="activeIndex" style="width: 100%" type="card"><!--@tab-click="handleOptions"-->
            <el-tab-pane label="会议表决" name="first">
                <div v-for="vote in voteList" style="text-align: center;width: 100%;margin: 3%  auto"
                     v-if="voteList.length !== 0">
                    <el-button type="text" @click="showVoteInfo(vote)">{{vote.label}}</el-button>
                    <br/>
                    <el-radio-group v-model="vote.radio" v-if="vote.canVote !== 0">
                        <el-radio-button label="赞同"></el-radio-button>
                        <el-radio-button label="反对"></el-radio-button>
                        <el-radio-button label="弃权"></el-radio-button>
                    </el-radio-group>
                    <div v-else="vote.canVote !== 0">
                        <span>此会议您没有投票权</span>
                    </div>
                </div>

                <!--//债委会-->
                <div style="text-align: center" v-if="commissionVoteList.length !== 0">
                    <el-button type="text" @click="showCommissionInfo">债权人委员会选举</el-button>
                    <br/>
                    <el-form ref="commisionForm" :model="commisionForm" label-width="80px"
                             style="width: 70%; margin-left: 15%" v-if="commissionVoteList[0].canVote !== 0">
                        <el-form-item :label="commission.name+'：'" v-for="commission in commissionList">
                            <el-radio-group v-model="commission.radio">
                                <el-radio-button label="赞成"></el-radio-button>
                                <el-radio-button label="反对"></el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                    <div v-else="commissionVoteList[0].canVote !== 0">
                        <span>此会议您没有投票权</span>
                    </div>
                    <!--todo 不直接加载所有候选人-->
                    <div v-if="commissionVoteList[0].canVote !== 0">
                        <div style="margin: 2% auto"> 自选 ：</div>
                        <!--<ul style="list-style:none;">
                            <li v-for="form in committeeResult">{{form.name}}</li>
                        </ul>-->
                        <div style="margin: 3% auto ">
                            <el-autocomplete popper-class="my-autocomplete" v-model="peopleName"
                                             :fetch-suggestions="querySearch"
                                             placeholder="请输入内容"
                                             @select="handleSelect">
                                <i class="el-button" slot="suffix"
                                   type="primary" plain
                                   @click="handleIconClick">选择</i>
                                <template slot-scope="{ item }">
                                    <div class="name">{{ item.value }}</div>
                                    <span class="addr">{{ item.address }}</span>
                                </template>
                            </el-autocomplete>
                        </div>

                        <!--标签-->
                        <el-tag
                                :disable-transitions="false"
                                @close="handleClose(tag)"
                                v-for="tag in nameList"
                                :key="tag.id"
                                closable>
                            {{tag.value}}
                        </el-tag>
                    </div>
                </div>
                <div style=" text-align: center;" v-if="certificateButton">
                    <el-button @click="toCertificate" type="primary" style="margin: 3% auto;">点击查看区块链存证结果
                    </el-button>
                </div>
                <el-button @click="toSubmit" type="primary" style="width: 100%;position:fixed; bottom:0;"
                           :disabled="voteTimes>1"> 投票（剩余{{2-voteTimes}}次）
                </el-button>

            </el-tab-pane>

            <el-tab-pane label="文字直播" name="second">
                <div style="height: 300px; overflow:auto">
                    <div class="mobile-page">
                        <div v-for="(chatMessage, index) in managerMessages" :key="index">
                            <div class="admin-group">
                                <el-button class="user-img" circle>{{chatMessage.sendUser[0]}}</el-button>
                                <div class="admin-msg">
                                    <i class="triangle-admin"></i>
                                    <span class="admin-reply">{{chatMessage.content}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>

        <el-dialog
                title="表决详情"
                :visible.sync="centerDialogVisible"
                width="80%">
            <el-form :model="form">
                <el-form-item label="表决事项 ：">
                    <span>{{form.name}}</span>
                </el-form-item>
                <el-form-item label="表决类型 ：">
                    <span>{{form.type}}</span>
                </el-form-item>
            </el-form>

            <el-table :data="voteListDetails" v-if="voteListDetails.length > 0">
                <el-table-column property="name"
                                 @cell-click="downloadFile"
                                 label="文件"
                                 width="">
                </el-table-column>
            </el-table>

            <span id="fileDownloadUrl" v-if="voteListDetails.length > 0">{{form.fileDownloadUrl}}</span>
            <el-button type="primary" @click="toPcUrl(form.fileDownloadUrl)" style="display: block;margin: 3%  auto"
                       v-if="voteListDetails.length > 0">点击复制文件下载地址
            </el-button>
            <!--<div slot="footer" class="dialog-footer">
                <span id="fileDownloadUrl">{{fileDownloadUrl}}</span>
                <el-button @click="outerVisible = false">取 消</el-button>
            </div>-->
            <span style="margin: 3%  auto" v-if="committeeResultList">表决统计 ：</span><br/>
            <!---->
            <div v-if="committeeResultList">
                <el-table
                        v-if="voteType"
                        :data="groupList"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="targetType"
                            label="投票结果"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="peopleSum"
                            label="总签到人数"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="peopleFavor"
                            label="赞成人数"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="peopleRate"
                            label="赞成人数比例"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="amountSum"
                            label="总债权额"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="amountFavor"
                            label="赞成债权额"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="amountRate"
                            label="赞成债权额比例"
                            width="120">
                    </el-table-column>
                </el-table>
                <el-table
                        v-else="voteType"
                        :data="groupList"
                        border
                        style="width: 100%">
                    <el-table-column
                            fixed
                            prop="groups"
                            label="组别"
                            width="90">
                    </el-table-column>
                    <el-table-column
                            prop="state"
                            label="投票结果"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="peopleSum"
                            label="总签到人数"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="peopleFavor"
                            label="赞成人数"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="peopleRate"
                            label="赞成人数比例"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="amountSum"
                            label="总债权额"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="amountFavor"
                            label="赞成债权额"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="amountRate"
                            label="赞成债权额比例"
                            width="120">
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="mobileDetailFile !== ''">
                <span style="margin: 3%  auto">表决明细 ：</span>
                <!--<el-button type="text" @click="downloadDetail">表决明细.xls</el-button>-->
                <a :href='mobileDetailFile' @click="downloadDetail">表决明细.xls</a>
                <el-button type="primary" @click="toPcUrl(detailFileUrl)" style="display: block;margin: 3%  auto">
                    点击复制明细文件下载地址
                </el-button>
            </div>
            <!-- <span slot="footer" class="dialog-footer">
                 <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
             </span>-->
        </el-dialog>
    </div>
</template>

<script>
    import util from 'assets/js/util.js'
    import conf from 'assets/js/conf.js'
    // import neplayer from "assets/js/neplayer.min.js"
    // import "assets/css/neplayer.min.css"
    import {hex_md5} from "assets/js/md5.js"
    import videojs from 'video.js'
    import {videoPlayer} from 'vue-video-player'
    import SockJS from 'sockjs-client';
    import Stomp from 'webstomp-client';
    window.videojs = videojs;
    require('video.js/dist/video-js.css');
    require('videojs-contrib-hls/dist/videojs-contrib-hls.js');
    require('vue-video-player/src/custom-theme.css');

    export default {
        components: {
            videoPlayer
        },
        data() {
            return {
                detailFileUrl: '',
                linkUrlList: [],
                pcUrl: '',
                mobileDetailFile: '',
                voteTimes: '',
                label: '',
                commissionLabel: '',
                fileDownloadUrl: '',
                number: '',
                form: {},
                activeIndex: 'first',
                watchName: "",
                peopleName: "",
                nameList: [],
                watchList: [],
                groupList: [],
                user: {},
                people: {},
                committeeResult: {
                    name: '',
                    id: ''
                },
                commisionForm: {},
                managerMessages: [],
                commissionVoteList: [],
                voteList: [],
                commissionList: [],
                restaurants: [],
                voteListDetails: [],
                name: '',
                centerDialogVisible: false,
                voteType: false,
                innerVisible: false,
                certificateButton: false,
                committeeResultList: false,
                showVideoPlayer: false,
                player: null,
                showVideo: true,
                videoUrl: '',
                playerOptions: {
                    // videojs and plugin options
                    autoplay: true,
                    height: '640',
                    sources: [{
                        withCredentials: false,
                        type: "application/x-mpegURL",
                        src: util.getUrlParam(document.location.href, 'hlsPullUrl'),
                    }],
                    controlBar: {
                        timeDivider: false,
                        durationDisplay: false
                    },
                    flash: {hls: {withCredentials: false}},
                    html5: {hls: {withCredentials: false}},
                    notSupportedMessage: '该直播暂无法播放，请稍后再试',
                    poster: "//"//nos.netease.com/vod163/poster.png"
                }
            }
        },
        methods: {
            toUrl: function (linkUrl) {
                window.location.href = linkUrl;
            },
            onWatchChange: function () {
                this.watchList.forEach(_watch => {
                    if (_watch.name === this.watchName) {
                        this.player.setDataSource(_watch.dataSource);
                        this.videoUrl = window.location.href.replace("meeting-system", "video-pc") + "&videoUrl=" + _watch.hlsPullUrl;
                    }
                })
            },
            // fileDownload: function () {
            //     let Url = document.getElementById("fileDownloadUrl").innerText;
            //     let oInput = document.createElement('input');
            //     oInput.value = Url;
            //     document.body.appendChild(oInput);
            //     oInput.select(); // 选择对象
            //     document.execCommand("Copy"); // 执行浏览器复制命令
            //     oInput.className = 'oInput';
            //     oInput.style.display = 'none';
            //     alert('复制成功');
            // },
            // detailFileCopy: function () {
            //     let Url = conf.baseUrl + '/file/get/' + this.mobileDetailFile + '?type=1';
            //     let oInput = document.createElement('input');
            //     oInput.value = Url;
            //     document.body.appendChild(oInput);
            //     oInput.select(); // 选择对象
            //     document.execCommand("Copy"); // 执行浏览器复制命令
            //     oInput.className = 'oInput';
            //     oInput.style.display = 'none';
            //     alert('复制成功');
            // },
            toPcUrl: function (url) {
                if (url === "")
                    url = this.videoUrl;
                let input = document.getElementById("input");
                input.value = url;
                input.select(); // 选择对象
                document.execCommand("copy")
                /*let Url = document.getElementById("pcUrl").innerText;
                let oInput = document.createElement('input');
                oInput.value = Url;
                document.body.appendChild(oInput);
                oInput.select(); // 选择对象
                document.execCommand("Copy"); // 执行浏览器复制命令
                oInput.className = 'oInput';
                oInput.style.display = 'none';*/
                alert('复制成功');
            },
            downloadFile: function (row, column, cell, event) {
                window.open(conf.baseUrl + '/file/get/' + row.id + '?type=1')
            },
            downloadDetail: function () {

                window.open(conf.baseUrl + '/file/get/' + this.mobileDetailFile + '?type=1')
            },
            handleSelect(item) {
                this.people = item;
            },
            handleClose(tag) {
                this.nameList.splice(this.nameList.indexOf(tag), 1);
            },
            handleIconClick() {
                if (this.nameList.length + 1 > this.commissionVoteList[0].selectNum) {
                    alert('您已超出投票人数！');
                    this.peopleName = "";
                    return;
                }
                if (this.peopleName === "") {
                    alert("您选择的成员不存在！！！");
                    return;
                }
                let isSame = false;
                this.restaurants.forEach(_people => {
                    if (this.peopleName === _people.value) {
                        isSame = true;
                    }
                });
                this.peopleName = "";
                if (!isSame) {
                    alert("您选择的成员不存在！！！");
                    return;
                }
                const _self = this;
                isSame = false;
                this.nameList.forEach(_people => {
                    if (_self.people.value === _people.value) {
                        isSame = true;
                    }
                });
                if (!isSame) {
                    this.nameList.push(this.people);
                }
            },
            querySearch(queryString, cb) {
                let restaurants = this.restaurants;
                let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                results.slice(0, 10);
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.indexOf(queryString) >= 0);
                };
            },
            toCertificate: function () {
                window.location.href = '../meeting/certificate-detail.html?' + 'voteId=' + this.voteId + '&creditorId=' + this.creditorId;
            },
            matchVoteType: function (type) {
                let typeText = 3;
                switch (type) {
                    case "赞成":
                        typeText = 1;
                        break;
                    case "反对":
                        typeText = 2;
                        break;
                    case "弃权":
                        typeText = 3;
                        break;
                    default:
                        break
                }
                return typeText
            },
            toSubmit: function () {
                const qs = require('qs');

                let isChosen = true;
                let voteName = "";
                this.voteList.forEach(_vote => {
                    if (_vote.radio === undefined || _vote.radio === "") {
                        isChosen = false;
                        voteName = _vote.label;
                    }
                });
                if (!isChosen) {
                    alert("请对" + voteName + "进行表决");
                    return;
                }
                let voteResultList = [];
                let voteResult = {};
                let result = "";
                this.nameList.forEach(_people => {
                    result += _people.id + ",";
                });
                this.commissionList.forEach(_people => {
                    if (_people.radio === "赞成") {
                        let isSame = false;
                        this.nameList.forEach(people => {
                            if (people.id === _people.id)
                                isSame = true;
                        });
                        if (!isSame)
                            result += _people.id + ",";
                    }
                });
                if (result.length > 0)
                    result = result.substring(0, result.length - 1);
                this.voteList.forEach(_vote => {
                    voteResult = {
                        id: _vote.id,
                        result: this.matchVoteType(_vote.radio)
                    };
                    voteResultList.push(voteResult);
                });
                voteResultList.push({
                    id: this.commissionVoteList[0].id,
                    result: result
                });

                const _self = this;

                util.ajax({
                    url: `/vote/vote`,
                    /*params: {
                        votePoList: voteResultList
                    },*/
                    data: {
                        votePoList: voteResultList
                    },
                    transformRequest: [function (data) {
                        let ret = '';
                        for (let it in data) {
                            for (let i = 0, n = data[it].length; i < n; i++) {
                                for (let t in data[it][i]) {
                                    ret += encodeURIComponent(it) + '[' + i + '].' + encodeURIComponent(t) + '=' + encodeURIComponent(data[it][i][t]) + '&';
                                }
                            }
                        }
                        return ret;
                    }],
                    success: function (data) {
                        if (data.status == 200) {
                            _self.voteTimes++;
                            loading.close();
                        } else {
                            alert(data.message);
                            loading.close();
                        }
                    },
                    error: function (data) {
                        alert(data.message);
                        loading.close();

                    }
                });

                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
            },
            initWatch() {
                this.managerMessages = [];

                this.user.name = sessionStorage.getItem('name');
                this.user.type = 1;
                this.user.meetingId = this.meetingId;
                this.user.uuid = this.uuid();

                this.initWebSocket();
            },
            initWebSocket() {
                let socket = new SockJS(conf.socketUrl + "/endpointWisely");
                this.client = Stomp.over(socket);
                this.client.connect({}, (frame) => {
                    this.client.subscribe('/refreshloginlist/' + this.user.meetingId, (tick) => {

                    });
                    this.client.subscribe('/refreshchatwindow/' + this.user.meetingId, (tick) => {
                        let chatMessage = JSON.parse(tick.body);
                        if (chatMessage.role === 2)
                            this.managerMessages.push(chatMessage);
                    });
                    this.online();
                }, (error) => {
                    console.log(error);
                });
            },
            online() {
                if (this.client && this.client.connected) {
                    this.client.send("/upLine", JSON.stringify(this.user), {})
                }
            },
            downLine() {
                if (this.client && this.client.connected) {
                    this.client.send("/downLine", JSON.stringify(this.user), {});
                }
            },
            closeWebSocket() {
                this.downLine();
                if (this.client) {
                    this.client.disconnect()
                }
            },
            uuid() {
                return hex_md5(this.creditorId + this.meetingId + "");
            },
            /*handleOptions: function (key, keyPath) {
                this.first = false;
                this.second = false;
                //this.third = false;
                //this.fourth = false;

                switch (key) {
                    case '1':
                        this.first = true;
                        break;
                    case '2':
                        this.second = true;
                        break;
                    /!* case '3':
                         this.third = true;
                         break;*!/
                    /!* case '4':
                         this.fourth = true;
                         break;*!/
                }
            },*/
            matchStateText: function (type) {
                let typeText = '';
                switch (type) {
                    case 0:
                        typeText = '预选举';
                        break;
                    case 1:
                        typeText = '选举中';
                        break;
                    case 2:
                        typeText = '线上投票关闭中';
                        break;
                    case 3:
                        typeText = '已结束';
                        break;
                    default:
                        break
                }
                return typeText
            },
            matchTypeText: function (type) {
                let typeText = '';
                switch (type) {
                    case 99:
                        typeText = '其他';
                        break;
                    case 1:
                        typeText = '继续或者停止债务人的营业';
                        break;
                    case 2:
                        typeText = '债务人重整计划';
                        break;
                    case 3:
                        typeText = '债务人财产的管理方案';
                        break;
                    case 4:
                        typeText = '破产财产的变价方案';
                        break;
                    case 5:
                        typeText = '和解协议';
                        break;
                    case 6:
                        typeText = '破产财产的分配方案';
                        break;
                    case 0:
                        typeText = '债权人委员会选举';
                        break;
                    default:
                        break
                }
                return typeText
            },
            showCommissionInfo() {
                let commission = this.commissionVoteList[0];
                const _self = this;
                util.ajax({
                    url: `/vote/info`,
                    params: {voteId: commission.id},
                    success: function (data) {
                        if (data.data.state === 3) {
                            data.data.voteCommitteeResultList.forEach(_group => {
                                _self.groupList.push({
                                    targetType: _group.targetType,
                                    peopleFavor: _group.peopleFavor,
                                    peopleSum: _group.peopleSum,
                                    amountSum: _group.amountSum,
                                    amountFavor: _group.amountFavor,
                                    peopleRate: _group.peopleRate,
                                    amountRate: _group.amountRate,
                                })
                            });
                            _self.voteType = true;
                            _self.committeeResultList = true;
                        }
                        _self.committeeResult = data.data.committeeResult || '';
                        _self.id = data.data.id;
                        _self.form.type = _self.matchTypeText(data.data.type);
                        _self.form.name = data.data.name;
                        _self.materialFileids = data.data.materialFileids;
                        _self.form.compressFileUrl = data.data.compressFileUrl;
                        _self.mobileDetailFile = data.data.mobileDetailFile;
                        _self.detailFileUrl = conf.baseUrl + '/file/get/' + data.data.mobileDetailFile + '?type=1';
                        _self.directMembers = data.data.directMembers || '';
                        _self.candidateMembers = data.data.candidateMembers || '';

                        _self.voteListDetails.splice(0, _self.voteListDetails.length);
                        if (_self.materialFileids !== '') {
                            util.ajax({
                                url: '/file/getFileList',
                                params: {eids: _self.materialFileids},
                                success: function (data) {
                                    data.data.forEach(_file => _self.voteListDetails.push({
                                        id: _file.id,
                                        name: _file.name,
                                        url: _file.url,
                                    }));
                                    _self.centerDialogVisible = true;
                                },
                            });
                        } else {
                            _self.centerDialogVisible = true;
                        }
                    },
                });
            },
            showVoteInfo(vote) {
                const _self = this;
                util.ajax({
                    url: `/vote/info`,
                    params: {voteId: vote.id},
                    success: function (data) {
                        if (data.data.state === 3) {
                            data.data.voteCommonResultList.forEach(_group => _self.groupList.push({
                                groupName: _group.groupName,
                                state: _group.state,
                                peopleFavor: _group.peopleFavor,
                                peopleSum: _group.peopleSum,
                                amountSum: _group.amountSum,
                                amountFavor: _group.amountFavor,
                                peopleRate: _group.peopleRate,
                                amountRate: _group.amountRate,
                            }));
                            _self.voteType = false;
                            _self.committeeResultList = true;
                        }
                        _self.committeeResult = data.data.committeeResult || '';
                        _self.id = data.data.id;
                        _self.form.type = _self.matchTypeText(data.data.type);
                        _self.form.name = data.data.name;
                        _self.materialFileids = data.data.materialFileids;
                        _self.mobileDetailFile = data.data.mobileDetailFile;
                        _self.detailFileUrl = conf.baseUrl + '/file/get/' + data.data.mobileDetailFile + '?type=1';
                        _self.form.compressFileUrl = data.data.compressFileUrl;
                        _self.directMembers = data.data.directMembers || '';
                        _self.candidateMembers = data.data.candidateMembers || '';

                        _self.voteListDetails.splice(0, _self.voteListDetails.length);
                        if (_self.materialFileids !== '') {
                            util.ajax({
                                url: '/file/getFileList',
                                params: {eids: _self.materialFileids},
                                success: function (data) {
                                    data.data.forEach(_file => _self.voteListDetails.push({
                                        id: _file.id,
                                        name: _file.name,
                                        url: _file.url,
                                    }));
                                    _self.centerDialogVisible = true;
                                },
                            });
                        } else {
                            _self.centerDialogVisible = true;
                        }
                    },
                });
            },
            matchVoteTypeText(type) {
                let typeText = "";
                switch (type) {
                    case "1":
                        typeText = "赞成";
                        break;
                    case "2":
                        typeText = "反对";
                        break;
                    case "3":
                        typeText = "弃权";
                        break;
                    default:
                        break
                }
                return typeText
            },
        },
        created() {
            const _self = this;
            this.meetingId = parseInt(util.getUrlParam(document.location.href, 'meetingId'));
            this.creditorId = parseInt(util.getUrlParam(document.location.href, 'creditorId'));
            this.videoWidth = document.documentElement.clientWidth;
            this.videoHeight = this.videoWidth * 360 / 640;
            this.playerOptions.height = "" + this.videoHeight;
            console.log(util.getUrlParam(document.location.href, 'hlsPullUrl'))
            util.ajax({
                url: '/channel/list',
                params: {meetingId: util.getUrlParam(document.location.href, 'meetingId')},
                success: function (data) {
                    if (data.data.type === 1) {
                        data.data.channel.content.forEach(_watch => _self.watchList.push({
                            hlsPullUrl: _watch.hlsPullUrl,
                            httpPullUrl: _watch.httpPullUrl,
                            rtmpPullUrl: _watch.rtmpPullUrl,
                            /*dataSource: [
                                {type: "video/flv", src: _watch.httpPullUrl},
                                {type: "rtmp/flv", src: _watch.rtmpPullUrl},
                                {type: "application/x-mpegURL", src: _watch.hlsPullUrl}
                            ],*/
                            dataSource: {type: "application/x-mpegURL", src: _watch.hlsPullUrl},
                            id: _watch.id,
                            name: _watch.name,
                        }));
                        _self.linkUrlList = data.data.linkUrlList;
                        _self.showVideoPlayer = true;
                        _self.videoUrl = window.location.href.replace("meeting-system", "video-pc") + "&videoUrl=" + util.getUrlParam(document.location.href, 'hlsPullUrl');;
                        _self.showVideo = true;
                    } else {
                        _self.linkUrlList = data.data.linkUrlList;
                        _self.showVideo = false;
                    }
                },
            });
        },
        beforeDestroy() {
            this.closeWebSocket();
        },
        mounted() {
            this.initWatch();
            const _self = this;
            console.log(this.playerOptions);
            util.ajax({
                url: '/vote/list',
                params: {meetingId: util.getUrlParam(document.location.href, 'meetingId')},
                success: function (data) {
                    data.data.forEach(_vote => {
                        _self.voteTimes = _vote.voteTimes;

                        if (_vote.type !== 0) {
                            _self.voteList.push({
                                id: _vote.id,
                                radio: _self.matchVoteTypeText(_vote.commonResult),
                                label: _vote.name,
                                state: _vote.state,
                                type: _vote.type,
                                canVote: _vote.canVote,
                                bropState: _vote.bropState,
                                selectNum: _vote.selectNum
                            });
                        } else {
                            if (_vote.candidateMembers !== undefined && _vote.candidateMembers !== "")
                                _vote.candidateMembers.forEach(_commission => {
                                    if (_vote.committeeResult !== undefined && _vote.committeeResult !== "") {
                                        let isChosen = false;
                                        _vote.committeeResult.forEach(_vote => {
                                            if (_vote.name === _commission.name)
                                                isChosen = true;
                                        });
                                        _self.commissionList.push({
                                            radio: isChosen ? "赞成" : "反对",
                                            id: _commission.id,
                                            name: _commission.name,
                                        })
                                    } else {
                                        _self.commissionList.push({
                                            id: _commission.id,
                                            name: _commission.name,
                                        })
                                    }
                                });
                            // todo 债委会多个
                            _self.commissionVoteList.push({
                                id: _vote.id,
                                label: _vote.name,
                                committeeResult: _vote.committeeResult,
                                commonResult: _vote.commonResult,
                                state: _vote.state,
                                type: _vote.type,
                                canVote: _vote.canVote,
                                bropState: _vote.bropState,
                                selectNum: _vote.selectNum
                            });
                            util.ajax({
                                url: `/vote/searchCreditor`,
                                params: {currentPage: 1, pageSize: 20000},
                                success: function (data) {
                                    data.data.content.forEach(_people => {
                                        _self.restaurants.push({
                                            id: _people.id,
                                            value: _people.name,
                                        })
                                    })

                                    _self.commissionVoteList[0].commonResult.split(",").forEach(_vote => {
                                        _self.restaurants.forEach(_people => {
                                            if (_vote === ("" + _people.id))
                                                _self.nameList.push(_people);
                                        })
                                    })
                                }
                            });
                        }
                    });
                    /* if (_self.bropState !== 0) {
                         _self.certificateButton = true;
                     }*/
                },
            });
            /*util.ajax({
                url: '/channel/list',
                params: {meetingId: util.getUrlParam(document.location.href, 'meetingId')},
                success: function (data) {
                    if (data.data.type === 1) {
                        data.data.channel.content.forEach(_watch => _self.watchList.push({
                            hlsPullUrl: _watch.hlsPullUrl,
                            httpPullUrl: _watch.httpPullUrl,
                            rtmpPullUrl: _watch.rtmpPullUrl,
                            /!*dataSource: [
                                {type: "video/flv", src: _watch.httpPullUrl},
                                {type: "rtmp/flv", src: _watch.rtmpPullUrl},
                                {type: "application/x-mpegURL", src: _watch.hlsPullUrl}
                            ],*!/
                            dataSource: {type: "application/x-mpegURL", src: _watch.hlsPullUrl},
                            id: _watch.id,
                            name: _watch.name,
                        }));
                        _self.linkUrlList = data.data.linkUrlList;
                        _self.player = neplayer('my-video', {}, ready => {
                            _self.player.setDataSource(_self.watchList[0].dataSource);
                        });
                        _self.videoUrl = window.location.href.replace("meeting-system", "video-pc") + "&token=" + sessionStorage.getItem("token") + "&channelId=" + _self.watchList[0].id;
                        _self.showVideo = true;
                    } else {
                        _self.linkUrlList = data.data.linkUrlList;
                        _self.showVideo = false;
                    }
                },
            });*/

        }
    }
</script>

<style>
    .wrapper {
        position: relative;
    }

    #input {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: -10;
    }

    body, h1, h2, h3, h4, p, ul, ol, li, form, input, textarea, th, td {
        margin: 0;
        padding: 0
    }

    body, input, select, textarea {
        font: 12px/1.5 Microsoft YaHei UI Light, tahoma, arial, "\5b8b\4f53";
        *line-height: 1.5;
        -ms-overflow-style: scrollbar
    }

    h1, h2, h3, h4 {
        font-size: 100%
    }

    ul, ol {
        list-style: none
    }

    a {
        text-decoration: none
    }

    a:hover {
        text-decoration: underline
    }

    img {
        border: 0
    }

    input, select, textarea {
        font-size: 100%
    }

    table {
        border-collapse: collapse;
        border-spacing: 0
    }

    /*rem*/
    html {
        font-size: 62.5%;
    }

    body {
        font: 16px/1.5 "microsoft yahei", 'tahoma';
    }

    body .mobile-page {
        font-size: 1.6rem;
    }

    /*浮动*/
    .fl {
        float: left;
    }

    .fr {
        float: right;
    }

    .clearfix:after {
        content: '';
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    body {
        background-color: #F5F5F5;
    }

    .mobile-page {
        max-width: 600px;
    }

    .mobile-page .admin-img, .mobile-page .user-img {
        width: 45px;
        height: 45px;
    }

    i.triangle-admin, i.triangle-user {
        width: 0;
        height: 0;
        position: absolute;
        top: 10px;
        display: inline-block;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
    }

    .mobile-page i.triangle-admin {
        left: 4px;
        border-right: 12px solid #fff;
    }

    .mobile-page i.triangle-user {
        right: 4px;
        border-left: 12px solid #9EEA6A;
    }

    .mobile-page .admin-group, .mobile-page .user-group {
        padding: 6px;
        display: flex;
        display: -webkit-flex;
    }

    .mobile-page .admin-group {
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
    }

    .mobile-page .user-group {
        justify-content: flex-end;
        -webkit-justify-content: flex-end;
    }

    .mobile-page .admin-reply, .mobile-page .user-reply {
        display: inline-block;
        word-wrap: break-word;
        padding: 8px;
        border-radius: 4px;
        background-color: #fff;
        margin: 0 15px 12px;
    }

    .mobile-page .admin-reply {
        box-shadow: 0px 0px 2px #ddd;
    }

    .mobile-page .user-reply {
        text-align: left;
        background-color: #9EEA6A;
        box-shadow: 0px 0px 2px #bbb;
    }

    .mobile-page .user-msg, .mobile-page .admin-msg {
        width: 75%;
        position: relative;
    }

    .mobile-page .user-msg {
        text-align: right;
    }
</style>